import React from 'react';
import { Card, Row, Col, Button } from 'antd';
import { useStore } from '@/store/useStore';
// import BookManagementTemplate from '@/templates/BookManagement';
// import StudentInfoTemplate from '@/templates/StudentInfo';

const templates = [
  // {
  //   id: 'book',
  //   name: '图书管理系统',
  //   description: '包含图书管理的完整功能',
  //   component: <BookManagementTemplate />
  // },
  // {
  //   id: 'student',
  //   name: '学生信息管理',
  //   description: '学生信息管理系统模板',
  //   component: <StudentInfoTemplate />
  // },
  {
    id: 'ecommerce',
    name: '电商后台',
    description: '电商管理后台模板',
    component: <div>电商模板预览</div>
  }
];

const TemplateSelector = ({ onSelect }: { onSelect: () => void }) => {
  const { applyTemplate } = useStore();
  
  const handleSelect = (template: any) => {
    applyTemplate(template);
    onSelect();
  };

  return (
    <Row gutter={[16, 16]}>
      {templates.map(template => (
        <Col span={8} key={template.id}>
          <Card 
            title={template.name}
            hoverable
            cover={template.component}
            actions={[
              <Button type="primary" onClick={() => handleSelect(template)}>
                使用模板
              </Button>
            ]}
          >
            <p>{template.description}</p>
          </Card>
        </Col>
      ))}
    </Row>
  );
};

export default TemplateSelector;